<template>
	<view class="content">
		<header-bar :title=titleName>
		</header-bar>
		<view-tabbar tabIndex=2></view-tabbar>
		<uni-search-bar radius="5" placeholder="请输入你要搜索的内容" clearButton="always" cancelButton="always" @confirm="search"
			@cancel="cancel" bgColor="#EEEEEE" />
		<zero-filter-bar ref="zeroFilterBar" :dataList="filterList" :needSticky="false" @filter='handleFilterItem'
			@extraClick='showDrawer()' :autoJustify="false"></zero-filter-bar>
		<view class="order-item">
			<view class="good-box">
				<image
					src="https://img12.360buyimg.com/n1/jfs/t1/209095/23/723/143579/6141ff31E70061a2d/27cc1f463156512c.jpg.avif"
					class="good-img">
				</image>
				<view class="good-info">
					<view class="good-title">
						朔铠浇花喷壶家用小喷水壶园艺工具洒水壶气压式消毒喷雾器小型压力浇水壶高压喷雾瓶 2L加厚卡扣款粉色
					</view>
					<view class="good-time">
						刚买回来就用过一次
					</view>
					<view class="tag-view">
						<uni-tag :circle="true" :inverted="true" text="免邮" type="error" size="mini" />
					</view>
					<view class="good-bottom">
						<view class="attr">
							当前拍卖价格：
						</view>
						<view class="good-price">
							¥10.5
						</view>
					</view>
					<view class="good-bottom">
						<view class="attr">
							拍卖截止时间：
						</view>
						<view class="good-times">
							<uni-countdown :font-size="12" :day="1" :hour="2" :minute="30" :second="0" color="#FFFFFF" background-color="#007AFF" />
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="order-item">
			<view class="good-box">
				<image
					src="https://img11.360buyimg.com/n1/jfs/t1/185124/21/25006/842299/628b8da8E6ec44409/3834c97c65d0bfec.png.avif"
					class="good-img">
				</image>
				<view class="good-info">
					<view class="good-title">
						农业肥料下肥双管手动施肥器追肥器玉米果树颗粒肥机器撒肥机 双管绿手动颗粒溜肥器50斤装
					</view>
					<view class="good-time">
						买回来还没有用过
					</view>
					<view class="tag-view">
						<uni-tag :circle="true" :inverted="true" text="免邮" type="error" size="mini" />
					</view>
					<view class="good-bottom">
						<view class="attr">
							当前拍卖价格：
						</view>
						<view class="good-price">
							¥160.0
						</view>
					</view>
					<view class="good-bottom">
						<view class="attr">
							拍卖截止时间：
						</view>
						<view class="good-times">
							<uni-countdown :font-size="12" :day="0" :hour="5" :minute="28" :second="33" color="#FFFFFF" background-color="#007AFF" />
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="order-item">
			<view class="good-box">
				<image
					src="https://img14.360buyimg.com/n7/jfs/t1/124867/15/22230/364939/627e19baEfa101c51/63857b9347aa5e71.jpg"
					class="good-img">
				</image>
				<view class="good-info">
					<view class="good-title">
						四冲程汽油微耕机松土机旋耕机耕地机小型农用翻地机开沟机除草机 宗申配松土刀行走轮除草轮开沟器
					</view>
					<view class="good-time">
						刚买回来用过一年
					</view>
					<view class="tag-view">
						<uni-tag :circle="true" :inverted="true" text="免邮" type="error" size="mini" />
					</view>
					<view class="good-bottom">
						<view class="attr">
							当前拍卖价格：
						</view>
						<view class="good-price">
							¥2000.0
						</view>
					</view>
					<view class="good-bottom">
						<view class="attr">
							拍卖截止时间：
						</view>
						<view class="good-times">
							<uni-countdown :font-size="12" :day="2" :hour="2" :minute="30" :second="0" color="#FFFFFF" background-color="#007AFF" />
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="order-item">
			<view class="good-box">
				<image
					src="https://img11.360buyimg.com/n1/jfs/t1/135257/32/22355/280244/61e90204E52ca6244/a5bc31c99ad3401e.jpg.avif"
					class="good-img">
				</image>
				<view class="good-info">
					<view class="good-title">
						尊福林 园艺工具套装家用种植工具箱种菜种花多肉松土铲子喷壶修枝剪刀组合园艺用品 园艺工具-10件套
					</view>
					<view class="good-time">
						刚买回来用过一个工具
					</view>
					<view class="tag-view">
						<uni-tag :circle="true" :inverted="true" text="免邮" type="error" size="mini" />
					</view>
					<view class="good-bottom">
						<view class="attr">
							当前拍卖价格：
						</view>
						<view class="good-price">
							¥100.0
						</view>
					</view>
					<view class="good-bottom">
						<view class="attr">
							拍卖截止时间：
						</view>
						<view class="good-times">
							<uni-countdown :font-size="12" :day="1" :hour="2" :minute="30" :second="0" color="#FFFFFF" background-color="#007AFF" />
						</view>
					</view>
				</view>
			</view>
		</view>
		<button @click="go">发布拍卖</button>
	</view>
</template>

<script>
	import zeroFilterBar from "@/uni_modules/zero-filter-bar/components/zero-filter-bar/zero-filter-bar.vue";
	export default {
		components: {
			zeroFilterBar
		},
		data() {
			return {
				titleName:"公益拍卖",
				searchValue: '公益拍卖',
				filterList: [{
						id: 0,
						name: '综合',
					},
					{
						id: 1,
						name: '浏览量',
						sort: true
					},
					{
						id: 2,
						name: '收藏量',
						sort: true
					},
					{
						id: 3,
						name: '信誉值',
						sort: true
					}
				]
			}
		},
		onLoad() {},
		methods: {
			go: function() {
				uni.navigateTo({
					url: '/subpkg/auction/auction'
				})
			},
			handleFilterItem(index, desc, item) {
				console.log(index, desc, item)
			},

			handleFilterExtra() {
				// 确认自定义筛选事件后，高亮右侧按钮
				this.$refs.zeroFilterBar.setCurrentExtraOn()
				this.closeDrawer();
			},
			showDrawer() {
				this.$refs.showRight.open();
			},
			closeDrawer() {
				this.$refs.showRight.close();
			},
			Scroll(e) {
				let top = this.$refs.zeroFilterBar.scrollTop
				this.needSticky = e.scrollTop > top
			},
			search(res) {
				uni.showToast({
					title: '搜索：' + res.value,
					icon: 'none'
				})
			},
			input(res) {
				console.log('----input:', res)
			},
			clear(res) {
				uni.showToast({
					title: 'clear事件，清除值为：' + res.value,
					icon: 'none'
				})
			},
			blur(res) {
				uni.showToast({
					title: 'blur事件，输入值为：' + res.value,
					icon: 'none'
				})
			},
			focus(e) {
				uni.showToast({
					title: 'focus事件，输出值为：' + e.value,
					icon: 'none'
				})
			},
			cancel(res) {
				uni.showToast({
					title: '点击取消，输入值为：' + res.value,
					icon: 'none'
				})
			}
		},
		onBackPress() {
			// #ifdef APP-PLUS
			plus.key.hideSoftKeybord();
			// #endif
		}
	}
</script>

<style lang="scss">
	.search-result {
		padding-top: 10px;
		padding-bottom: 20px;
		text-align: center;
	}

	.search-result-text {
		text-align: center;
		font-size: 14px;
		color: #666;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		padding: 0px;
	}

	.uni-mt-10 {
		margin-top: 10px;
	}

	.order-item {
		padding: 20rpx 0;
		width: 750rpx;
		height: 310rpx;
		background: #FFFFFF;
		opacity: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		border-top: 24rpx solid #F5F6F9;
		position: relative;
	}

	.order-item .good-box {
		width: 670rpx;
		height: 230rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.order-item .good-box .good-img {
		position: relative;
		top: 40rpx;
		width: 230rpx;
		height: 275rpx;
		opacity: 1;
		border-radius: 16rpx;
	}

	.good-box .good-info {
		width: 420rpx;
		height: 200rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
	}

	.good-info .good-title {
		width: 420rpx;
		height: 88rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		line-height: 45rpx;
		color: #000000;
		opacity: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.good-info .good-time {
		position: absolute;
		top: 125rpx;
		left: 292rpx;
		color: orange;
		font-size: 29rpx;
	}

	.good-info .tag-view {
		position: absolute;
		top: 167rpx;
		left: 290rpx;
	}

	.good-info .good-bottom {
		position: relative;
		top: 80rpx;
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.good-info .good-bottom .attr {
		width: 260rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #686661;
		opacity: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}

	.good-info .good-bottom .good-price {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 400;
		margin-right: 120rpx;
		color: red;
		opacity: 1;
	}
	
	button{
		width: 200rpx;
		height: 80rpx;
		margin-bottom: 200rpx;
		color: white;
		font-size: 32rpx;
		background-color: rgb(0,208,208);
	}
</style>
